<template>
    <div class="post-comment-panel">
        <Avatar :width="avatarWidth" :userId="userId"></Avatar>
        <div class="comment-form">
            <el-form :model="formData" :rules="rules" ref="formDataRef">
                <el-form-item prop="content">
                    <el-input clearable 
                    :placeholder="placeholderInfo" type="textarea" :rows="5" :maxlength="1000"
                        resize="none" show-word-limit v-model="formData.content">

                    </el-input>
                    <div class="insert-img" v-if="showInsertImg">
                        <div class="pre-img" v-if="commentImg">
                            <CommentImage :src="commentImg"/>
                            <span class="iconfont icon-remove" @click="removeCommentImg"></span>
                        </div>
                        <el-upload name="file" :show-file-list="false" v-else
                            accept=".png,.jpg,.jpeg,.gif,.bmp,.webp,.PNG,.JPEG,.GIF,.BMP,.WEBP" :multiple="false"
                            :http-request="selectImg">
                            <span class="iconfont icon-image"></span>
                        </el-upload>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="send-btn" @click="postCommentDo">发表</div>
    </div>
</template>

<script setup>
import CommentImage from './CommentImage.vue';
import { ref, reactive, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();

const api = {
    postComment :"/comment/postComment"
}

const props = defineProps({
    articleId: {
        type: String
    },
    pCommentId:{
        type:Number
    },
    replyUserId:{
        type:String
    }
    ,
    avatarWidth: {
        type: Number
    },
    userId: {
        type: String
    },
    showInsertImg: {
        type: Boolean
    },
    placeholderInfo:{
        type: String,
        default: '请输入评论内容...'
    }
})
//form信息
const checkPostComment = (rule, value, callback) => {
    if (value == null && formData.value.image == null) {
        callback(new Error(rule.message));
    } else {
        callback();
    }
}

const formData = ref({})
const formDataRef = ref()
const rules = ref({
    content: [
        { required: true, message: '请输入评论内容', trigger: 'blur', validator:checkPostComment},
        { min: 1, max: 1000, message: '长度在 1 到 1000 个字符', trigger: 'blur' }
    ]
})
//发表评论
const emit = defineEmits(['postCommentFinish'])
const postCommentDo=()=>{
    formDataRef.value.validate(async valid => {
        if(!valid){
            return;
        }
        let params = Object.assign({}, formData.value);
        params.articleId = props.articleId;
        params.pCommentId = props.pCommentId;
        params.replyUserId = props.replyUserId;
        let result = await proxy.Request({
            url: api.postComment,
            params,
        })
        if (!result) {
            return;
        }  
        proxy.Message.success("评论成功");
        formDataRef.value.resetFields();
        removeCommentImg();
        emit("postCommentFinish",result.data)
    })
}
//选择图片
const commentImg = ref(null);
const selectImg = (file) => {
    console.log(file);
    file = file.file;
    let img = new FileReader();
    img.readAsDataURL(file);
    img.onload = ({target}) => {
        let imgData = target.result;
        commentImg.value = imgData;
        formData.value.image = file;
    }
}

//移除图片
const removeCommentImg = () => {
    commentImg.value = null;
    formData.value.image = null;
}



</script>

<style lang="scss">
.post-comment-panel {

    display: flex;
    align-items: top;

    .comment-form {
        flex: 1;
        /* 使输入框占据剩余空间 */
        margin: 0px 10px;

        .el-textarea__inner {
            height: 60px;
        }

        .insert-img {
            line-height: normal;
        }

        .iconfont {
            font-size: 20px;
            margin-top: 3px;
            color: #989898;
        }
        .pre-img{
            margin-top: 10px;
            position: relative;
            .iconfont{
                position: absolute;
                top: -10px;
                color: #bebebe;
                cursor: pointer;
            }
        }
    }

    .send-btn {
        width: 60px;
        height: 60px;
        text-align: center;
        background-color: var(--link);
        color: #fff;
        line-height: 60px;
        border-radius: 5px;
        cursor: pointer;
    }
}
</style>>
